<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蘑菇街商品--详情页面</title>
    <meta name="description" content="蘑菇街是女生专属的一站式消费平台。这里有上万个精通购物和穿搭的时尚达人，每天在直播间里推荐当季值得买的时尚好物、限时折扣的品牌商品以及源自工厂的性价比好货。蘑菇街的商品均由平台官方审核供应商资质和品质，让消费者轻松享受变美体验。">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/detail.css">
    <script src="./script/main.js" type="module" id="detail"></script>
</head>

<body>
    <!-- 顶部区域结构 -->
    <header>
        <!-- 头部导航区域 -->
        <div class="h_nav">
            <div class="container">
                <div class="h_content">
                    <a href="index1.html" class="nav_item"><i></i>首页</a>
                    <a href="" class="nav_item" target="_blank"><i></i>商城</a>
                    <a href="" class="nav_item" target="_blank">我的订单</a>
                    <div class="h_about nav_item" target="_blank">关于我们<i class="icon_down"></i></div>
                </div>
            </div>
        </div>
        <!-- 头部主体区域 -->
        <div class="h_con">
            <div class="container clearfix">
                <a href="javascript:;" id="top_logo" title="蘑菇街首页" class="fl">
                    <img src="https://s10.mogucdn.com/mlcdn/c45406/190102_088f4i166l4gkl08k297h5kk8690i_260x200.png" alt="蘑菇街，我的买手街">
                </a>
                <div class="h_category fl">
                    <i></i> 目录
                </div>
                <div class="search_content fl">
                    <!-- 搜索框 -->
                    <div class="h_search fl">
                        <form action="" method="get" class="top_nav_form clearfix">
                            <input type="text" placeholder="连衣裙" class="sc_text fl">
                            <input type="submit" class="sc_btn fl" value="">
                        </form>
                        <div class="top_nav_tip">
                            <ul></ul>
                        </div>
                    </div>

                    <!-- 导航信息 -->
                    <div class="h_news fl">
                        <!-- 消息 -->
                        <div class="top_news">
                            <a href="javascript:;" class="news">
                                <i></i>
                                <span>消息</span>
                            </a>
                            <a href="javascript:;" class="collection">
                                <i></i>
                                <span>收藏</span>
                            </a>
                            <a href="cartlist.html" class="buycar">
                                <i></i>
                                <span>购物车</span>
                            </a>
                        </div>
                    </div>

                    <!-- 登录注册以及用户信息和退出 -->
                    <div class="h_inform fl">
                        <a href="./registry.html" class="register" style="display: none;">
                            <img src="https://s10.mogucdn.com/mlcdn/c45406/181016_143l3ehl4ebad6c2326gjk6d4h41g_48x48.png" alt=""> 注册
                        </a>
                        <a href="./login.html" style="display: none;" class="login">
                            <img src="https://s10.mogucdn.com/mlcdn/c45406/181016_143l3ehl4ebad6c2326gjk6d4h41g_48x48.png" alt=""> 登录
                        </a>
                        <span class="username">
                            <strong>欢迎您!!!</strong>
                            <i></i>
                        </span>
                        <a href="javascript:;" class="backlogin">退出登录</a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 商品详情信息区域结构 -->
    <div class="container">
        <div class="goodsinfo clearfix">
            <!-- 放大镜区域结构 -->
            <div class="wrap fl">
                <!-- 小图 -->
                <div id="spic">
                    <img src="" alt="">
                    <!--小放-->
                    <div id="sf"></div>
                </div>
                <!-- 大放 -->
                <div id="bf">
                    <!-- 大图 -->
                    <img src="" alt="" id="bpic">
                </div>
                <!-- 底下小图切换区域 -->
                <div id="ulist">
                    <a href="javascript:;" id="left"></a>
                    <div id="list">
                        <ul>
                            <!-- <li class="active"></li> -->
                        </ul>
                    </div>
                    <a href="javascript:;" id="right"></a>
                </div>
            </div>

            <!-- 商品详细数据区域结构 -->
            <div class="detail_info fl">
                <h1 class="good_title">
                </h1>
                <!-- 商品价格、评价、销售额 -->
                <div class="good_data">
                    <dl>
                        <dt class="fl">价格:</dt>
                        <dd class="fl good_price"></dd>
                        <dd class="fr good_num">
                            <span>评价: <i class="evaluate"></i> </span>
                            <span>累计销量: <i class="salesnum"></i></span>
                        </dd>
                    </dl>
                </div>
                <!-- 联系客服 -->
                <dl class="com_style clearfix">
                    <dt class="fl">客服:</dt>
                    <dd class="fl service"></dd>
                </dl>
                <!-- 颜色 -->
                <dl class="com_style clearfix">
                    <dt class="fl color_info">颜色:</dt>
                    <dd class="fl good_color">
                        <ul>
                            <li>88粉色</li>
                            <li>88蓝色</li>
                            <li>88黑色</li>
                            <li>88白色</li>
                            <li>89黑色</li>
                            <li>89白色</li>
                            <li>89蓝色</li>
                            <li>89橘色</li>
                        </ul>
                    </dd>
                </dl>
                <!-- 尺码 -->
                <dl class="com_style clearfix">
                    <dt class="fl size_info">尺码:</dt>
                    <dd class="fl good_size">
                        <ul>
                            <li>S</li>
                            <li>M</li>
                            <li>L</li>
                            <li>XL</li>
                            <li>XXL</li>
                            <li>XXXL</li>
                            <li>XXXXL</li>
                        </ul>
                    </dd>
                </dl>
                <!-- 数量 -->
                <dl class="com_style clearfix">
                    <dt class="fl">数量:</dt>
                    <dd class="fl number">
                        <span class="num_reduce"></span>
                        <input type="text" value="1">
                        <span class="num_add"></span>
                        <strong class="good_stock">库存量2000件</strong>
                    </dd>
                </dl>

                <!-- 立即购买和加入购物车按钮 -->
                <div class="btns">
                    <a href="javascript:;" class="buy_btn">立即购买</a>
                    <a href="javascript:;" class="car_btn">加入购物车</a>
                </div>
            </div>


        </div>
    </div>






    <!-- 底部区域结构 -->
    <footer class="foot">
        <div class="container">
            <div class="f_conbox">
                <!-- 底部图标 -->
                <div class="f_icon">
                    <a href="javascript:;">
                        <img src="https://s10.mogucdn.com/mlcdn/c45406/181112_4a8ch8fac2i12ib313hif4da35ed3_280x76.png" alt="">
                    </a>
                </div>
                <!-- 底部帮助栏目 -->
                <div class="f_help clearfix">
                    <dl class="fl">
                        <dt>新手帮助
                            <p class="f_help_border"></p>
                        </dt>
                        <dd>
                            <a href="javascript:;">常见问题</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">自动服务</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">联系客服</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">意见反馈</a>
                        </dd>
                    </dl>
                    <dl class="fl">
                        <dt>权益保障
                            <p class="f_help_border"></p>
                        </dt>
                        <dd>
                            <a href="javascript:;">全国包邮</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">7天无理由退货</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">退货运费补贴</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">限时发货</a>
                        </dd>
                    </dl>
                    <dl class="fl">
                        <dt>支付方式
                            <p class="f_help_border"></p>
                        </dt>
                        <dd><a href="javascript:;">微信支付</a></dd>
                        <dd><a href="javascript:;">支付宝</a></dd>
                        <dd><a href="javascript:;">白付美支付</a></dd>
                    </dl>
                    <dl class="fl">
                        <dt>移动客户端下载
                            <p class="f_help_border"></p>
                        </dt>
                        <dd><a href="javascript:;">蘑菇街</a></dd>
                        <dd><a href="javascript:;">美丽说</a></dd>
                        <dd><a href="javascript:;">uni引力</a></dd>
                    </dl>
                </div>
                <!-- 底部关于项 -->
                <div class="f_about">
                    <ul>
                        <li>
                            <a href="javascript:;">关于我们</a>
                        </li>
                        <li>
                            <a href="javascript:;">招聘信息</a>
                        </li>
                        <li>
                            <a href="javascript:;">联系我们</a>
                        </li>
                        <li>
                            <a href="javascript:;">商家入驻</a>
                        </li>
                        <li>
                            <a href="javascript:;">商家后台</a>
                        </li>
                        <li>
                            <a href="javascript:;">规则中心</a>
                        </li>
                        <li>
                            <a href="javascript:;">规则众议院</a>
                        </li>
                        <li>
                            <a href="javascript:;">有害信息举报</a>
                        </li>
                        <li>
                            <a href="javascript:;">用户隐私保护</a>
                        </li>
                    </ul>
                </div>
                <!-- 底部商家公司名称 -->
                <div class="footer_hostname"><span>©2020 Mogu.com 杭州卷瓜网络有限公司</span></div>
            </div>
        </div>
    </footer>
</body>

</html>